<template>
	<view class="edit-info">
		<view class="content">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="头像" name="avatarUrl">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="formData.avatarUrl"></image>
					</button>

				</uni-forms-item>
				<uni-forms-item label="昵称" name="nickname">
					<input type="nickname" style="text-align: right;" class="weui-input" placeholder="请输入昵称"
						@change="getNickName" v-model="formData.nickname" />
				</uni-forms-item>

				<uni-forms-item label="手机" name="mobile">
					<uni-easyinput type="text" maxlength="11" v-model="formData.mobile" placeholder="请输入凝成" />
				</uni-forms-item>
			</uni-forms>
			<view class="footer-btn" @click="savaInfo()">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseURL
	} from '@/common/request.js'
	import {
		fetchUpDataInfo
	} from '@/api/weixin.js'
	export default {
		name: "edit-info",
		data() {
			return {
				formData: {
					avatarUrl: '',
					nickname: '',
					mobile: ''
				}
			}
		},
		onLoad(options) {
			if (options.data) {
				const curInfo = JSON.parse(decodeURIComponent(options.data))
				console.log('curInfo', curInfo);
				this.formData.avatarUrl = curInfo.avatarUrl
				this.formData.nickname = curInfo.nickname
				this.formData.mobile = curInfo.mobile

			}
		},
		onShow() {

		},
		methods: {

			onChooseAvatar(e) {
				this.formData.avatarUrl = e.detail.avatarUrl;
				console.log('选择===', this.formData.avatarUrl);
				const url = baseURL.slice(0, -3).replace('/b', '//b')
				console.log("url: ", url);
				uni.uploadFile({
					url: url + '/upload/cloud',
					filePath: this.formData.avatarUrl,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						const data = JSON.parse(uploadFileRes.data)
						console.log('上传成功', data.data)
						this.formData.avatarUrl = data.data
					},
					fail(err) {
						console.log("err: ", err);
					}
				});
			},
			getNickName(e) {
				this.formData.nickname = e.detail.value
				console.log("微信名称", this.formData.nickname)
			},
			async savaInfo() {
				console.log("this.formData: ", this.formData);
				const response = await fetchUpDataInfo(this.formData)
				console.log("response: ", response);
				if (response.code == 0) {
					uni.showToast({
						title: '修改成功'
					})
					uni.reLaunch({
						url:'/pages/userInfo/index?token=1'
					})
				}else{
					uni.showToast({
						title: '修改失败'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.edit-info {
		padding: 20rpx;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.content {
			position: relative;
			width: 100%;
			height: 100%;

			.avatar-wrapper {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				text-align: right;
				margin-right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;

				&:after {
					border: none;
				}

				>image {
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
			}

			.footer-btn {
				width: 100%;
				color: white;
				position: absolute;
				text-align: center;
				height: 40px;
				border-radius: 20px;
				line-height: 40px;
				background: #2979ff;
				bottom: 40rpx;
			}
		}
	}
</style>
